<template>
  <div class="Pagination">
    <div class="top_pagination miniTS">
      <div>
        共有
        <span class="top_pagination_font largeTS focusTC">{{ pageTotal }}</span>
        个记录满足条件，当前第
        <span class="top_pagination_font largeTS focusTC">{{ _currentPage }}</span>
        页，跳转到第
        <a-dropdown :trigger="['click']">
          <a class="top_pagination_click tableBC" @click.prevent>
            <span class="top_pagination_font largeTS focusTC">
              {{ currentPage }}
            </span>
            <DownOutlined class="align-middle ml-1 mb-[4px] largeTS" />
          </a>
          <template #overlay>
            <a-menu
              :get-popup-container="(triggerNode: any) => triggerNode.parentNode"
              class="top_pagination_menu scrollbar_hover"
            >
              <a-menu-item v-for="e in Math.ceil(pageTotal / _pageSize)" :key="e" @click="onSelectTopPage(e)">
                {{ e }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        页
      </div>
      <slot name="topInfo" />
    </div>
    <div>
      <slot />
    </div>
    <div class="sticky-footer">
      <div v-if="pageTotal !== 0" class="bottom_pagination">
        <a-pagination
          v-model:current="_currentPage"
          v-model:pageSize="_pageSize"
          show-size-changer
          show-quick-jumper
          :page-size-options="pageSizes"
          :total="pageTotal"
          @show-size-change="handleSizeChange"
          @change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

/**
 * 常量
 * */

/**
 * 组件定义
 * */
const emit = defineEmits<{
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
  (e: 'update:skipCount', value: number): void
  (e: 'change', currentPage: number, pageSize: number, skipCount: number): void
}>()

const props = withDefaults(
  defineProps<{
    currentPage: number // 当前页
    skipCount: number // 跳过数量
    pageSize: number // 页数最大数量
    pageSizes: string[] // 页数最大数量
    pageTotal: number // 总数
    pageId?: string // 分页标识，也会传递给table
  }>(),
  {
    pageSizes: () => ['20', '40', '60', '80']
  }
)

const _currentPage = computed({
  get() {
    return props.currentPage
  },
  set(value) {
    emit('update:currentPage', value)
  }
})
const _pageSize = computed({
  get() {
    return props.pageSize
  },
  set(value) {
    emit('update:pageSize', value)
  }
})
const _skipCount = computed({
  get() {
    return props.skipCount
  },
  set(value) {
    emit('update:skipCount', value)
  }
})
/**
 * 顶部分页
 * */
const onSelectTopPage = (val: number) => {
  _currentPage.value = val
  handleCurrentChange(val, _pageSize.value)
}
/**
 * 底部分页
 * */
// handleSizeChange会触发handleCurrentChange，所以需要限制andleSizeChange时不触发handleCurrentChange
let isHandleSizeChange = false
const handleSizeChange = (current: number, pageSize: number) => {
  isHandleSizeChange = true
  const skipCountTemp = (current - 1) * pageSize
  _skipCount.value = skipCountTemp

  emit('change', current, pageSize, skipCountTemp)
}
const handleCurrentChange = (current: number, pageSize: number) => {
  if (isHandleSizeChange) {
    isHandleSizeChange = false
    return
  }

  const skipCountTemp = (current - 1) * pageSize
  _skipCount.value = skipCountTemp
  emit('change', current, pageSize, skipCountTemp)
}
</script>

<style scoped>
.Pagination {
  /* 会印象头部固定，不会消失 */
  position: relative;
  padding-bottom: 50px;
}
.top_pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  margin-bottom: 6px;
  color: #999;
  font-size: 12px;
}
.top_pagination_font {
  font-size: 16px;
  color: #bd9e55;
}
.top_pagination_click {
  padding-left: 6px;
  border-bottom: 1px solid #bd9e55;
}
.top_pagination_menu {
  max-height: 120px;
  overflow-y: auto;
}
.bottom_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 5px 0;
  /* 向上的边框阴影 */
  /* box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.109); */
}
.sticky-footer {
  position: sticky;
  bottom: -1px;
}
</style>
